import React, {Component} from 'react'

export default class RefDemo extends Component {
    constructor() {
        super()
        this.cRef = React.createRef()
    }

    componentDidMount() {

    }

    change() {
        setTimeout(() => {
            this.refs.stringRef.setName('stringRef done')
            this.funcRef.setName('funcRef done')
            this.cRef.current.setName('cRef done')
        }, 1000)
    }

    render() {
        return <div>
            <button onClick={this.change.bind(this)}>Test</button>
            <Child ref={'stringRef'}/>
            <Child ref={funcRef => this.funcRef = funcRef}/>
            <Child ref={this.cRef}/>
        </div>
    }
}

class Child extends Component {
    constructor() {
        super()
        this.state = {
            name: 'start'
        }
    }

    setName(value) {
        this.setState({name: value})
    }

    render() {
        return <div>
            <div>stringRef:{this.state.name} </div>
        </div>
    }
}